{extends file="../home.html"}
{block name="title"}{$head_title}{/block}
{block name="css"}
	<link rel="stylesheet" type="text/css" href="__PUBLIC__/Css/front/front_css/refresh_load.css?version={$version}"/>
	<link href="__PUBLIC__/Css/front/front_css/icon_new.css?version={$version}" type="text/css" rel="stylesheet">
	<style type="text/css">
	.service_header{
		position:absolute;
	}
	#load_wrapper{
		height:auto;
 
        bottom:2.55rem;
        margin-top: 2.2rem;
	}
   .circle_state_zan {
   		width:100%;
   		height:2rem;
   		box-sizing:border-box;
   		display:flex;
   		align-items:center;
   		position:relative;
   }
   .circle_state_zan .comment_icon{
   		width:3rem;
   		height:2rem;
   		position:absolute;
   		top:0;
   		right:0;
   		/*overflow:hidden;*/
   }
   .comment_icon input{
   		display:block;
   		width:2rem;
   		height:2rem;
   		position:absolute;
   		top:0;
   		right:0;
   		border:0;
   		background:none !important;
   		box-sizing:border-box;
   		padding-left:5rem;
   }
   .circle_state_zan .zan_icon{
   		width:2rem;
   		height:2rem;
   		position:absolute;
   		top:0;
   		left:0;
   		z-index:9;
   }
   .comment_icon span{
   		color: #999;
	    font-size: 0.5rem;
	    height: 2rem;
	    line-height: 2rem;
	    position: absolute;
	    top: 0;
	    right: 0;
	    margin-left: 0;
   }
   .comment_icon i{
   		position:absolute;
	   	top:0;
	   	left:0;
	   	right:0;
	   	bottom:0;
	   	margin:auto;
   }
   .zan_icon i{
	   	position:absolute;
	   	top:0;
	   	left:0;
	   	/*right:0;*/
	   	bottom:0;
	   	margin:auto;
   }
    /*--评论点赞按钮--*/
    .circle_state_zan .like{
    	display:block;
	    width: .6rem;
		height: 0.55rem;
    }
    .circle_state_zan .like-default{
    	background:url(/Public/Images/front/front_img/nolike@3x.png) 0 0 no-repeat;
		background-size:100% 100%;
    }
    .circle_state_zan .like-select{
    	background:url(/Public/Images/front/front_img/like@3x.png) 0 0 no-repeat;
		background-size:100% 100%;
    }
	/*#load_wrapper{
		top:12.1475rem;
	}*/
	/*全屏查看器样式*/
	.fullscreen{
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 10000;
		background-color: #000;
		display: none;
	}
	.fullscreen .fullscreen_slide{
		background-color: #000;
	}
	/*固定顶栏*/
	.top_nav_fixed{
		position: absolute;
		top: 2.2rem;
		left: 0;
		z-index: 10;
	}
	/*swiper*/
	.swiper-container {
        width: 100%;
        /*height: 100%;*/
    }
    .swiper-container .swiper-slide{
        width: 92%;
    }
	.swiper-container-horizontal>.swiper-pagination{
	    bottom: 5px;
	}
	.swiper-pagination-bullet{
        width: .5rem;
        height: .5rem;
        background: #dcdcdc;
        border:0;
    }
    .swiper-pagination-bullet-active {
        opacity: 1;
        background: #2485e7;
    }
	.swiper-slide img{
        height: auto;
    }
    .circle_state_zan  .zan_num{
    	color:#999;
    	font-size:0.5rem;
    	height:2rem;
    	line-height:2rem;
    	position:absolute;
    	top:0;
    	left:.8rem;
    	margin-left:0;
    }
</style>
{/block}
{block name="content"}
<ul class="circle_tab clearfix" id="top_nav_copy" style="display:none">
    <li class="active" id="li_1">
        <a href="javascript:;">话题圈</a>
    </li>
    <li class="" id="li_2">
        <a href="/FrontEnjoy/project_list">找项目</a>
    </li>
    <li class="" id="li_3">
        <a href="/FrontEnjoy/touzi_list">找投资</a>
    </li>
</ul>
<div class="service_header">
    <!--<p>创享圈<a  onclick="if(check_investment())check_user('/FrontEnjoy/add_dynamic');">发表</a></p>-->
    <!-- <p>创享圈<a onclick="if(check_investment())check_user('/FrontEnjoy/add_dynamic');">发表</a></p> -->
    <p>创享圈<i class="icon_bianji3x img" onclick="if(check_investment())check_user('/FrontEnjoy/add_dynamic');"></i></p>
</div>
<div id="load_wrapper">
	<div id="#scroller">
		<div id="pullDown">
		    <span class="pullDownIcon"></span>
		</div>
		<!-- 轮播图  -->
		 <div class="swiper-container circle_banner">
	        <div class="swiper-wrapper">
	        	{foreach from=$cust_flash_list item=v}
	            <div class="swiper-slide">
	                <a href="{$v.link}"><img src="{$v.pic}" alt="" ></a>
	            </div>
	            {/foreach}
	        </div>
	        <!-- 如果需要分页器 -->
	        <div class="swiper-pagination"></div>
	    </div>

		<ul class="circle_tab clearfix" id="top_nav">
		    <li class="active" id="li_1">
		        <a href="javascript:;">话题圈</a>
		    </li>
		    <li class="" id="li_2">
		        <a href="/FrontEnjoy/project_list">找项目</a>
		    </li>
		    <li class="" id="li_3">
		        <a href="/FrontEnjoy/touzi_list">找投资</a>
		    </li>
		</ul>

		<div class="main" style="display:block;margin-bottom: 2.450rem;width: 92%;margin: auto;" id="main_1">
			<div class="hot_block">
				<div class="clearfix hot_title">
					<h6 class="fl">热门话题</h6>
				</div>
				<!-- 轮播图 -->
				<div class="swiper-container circle_topic">
					<div class="swiper-wrapper">
						{foreach from=$hot_topic_list item=v}
						{foreach from=$v item=topic}
						{if $topic}
						<div class="swiper-slide">

								<a href="/FrontEnjoy/topic_details/topic_id/{$topic.topic_id}">
									<div class="circle_img_bg">
										<div class="circle_bg_text">
											<p>投资公司</p>
											<span>{$topic.title}</span>
										</div>
										<img src="{$topic.pic}" style="height:100%;"/>
									</div>
								</a>
						</div>
						{/if}
						{/foreach}
						{/foreach}
					</div>
					<!-- <div class="swiper-pagination swiper-pagination1"></div> -->
				</div>
			</div>
			<!-- 列表 -->
			<div class='dynamic_list'>
				{foreach from=$dynamic_list item=v}
				<div class="circle_state">
					<div class="circle_state_user">
						<img src="{$v.headimgurl}" />
						<h6>{$v.realname}</h6>
						<span class="position">{$v.position}</span>
						<span class="timeago">{$v.addtime}</span>
					</div>
					<div class="circle_state_cont">
						<!-- 文字 -->
						<p class="text">{$v.contents}</p>
						<!-- 图片九宫格 -->
						<div class="circle_state_img clearfix">
							<!-- {if $v.imgs}
							{if count($v.imgs) >= 3}
							<span class="pic_num">{count($v.imgs)}张</span>
							{foreach from=$v.imgs item=img key=key}	
							{if $key <= 2}					
							<img src="{$img}" class="dynamic_img{if $key == 0} fl dl_img{elseif $key == 1} fr dr_img dr_one{elseif $key == 2} fr dr_img{/if}" data-row="{$key}" data-img="{$img}" />
							{else}
							<div class="dynamic_img hide" data-row="{$key}" data-img="{$img}"></div>
					        {/if}
							{/foreach}
							{elseif count($v.imgs) == 2}
							{foreach from=$v.imgs item=img key=key}
							<img src="{$img}" class="dynamic_img fl two" data-row="{$key}"  data-img="{$img}" />
							{/foreach}
							{elseif count($v.imgs) == 1}

							{foreach from=$v.imgs item=img}
							<img src="{$img}" class="dynamic_img fl one" data-row="0"  data-img="{$img}"/>
							{/foreach}
							{/if}
							{/if} -->
							<!-- 一张 img class =>one -->
							<!-- 2张 img class =>two -->
							<!-- 3张以及3张以上张 img class =>three -->
							{if $v.imgs}
							{foreach from=$v.imgs item=img key=key}	
							<img src="{$img}" class="dynamic_img {if count($v.imgs) >= 3}three{elseif count($v.imgs) == 2}two{else}one{/if}"  data-row="{$key}"  data-img="{$img}" alt="">
							{/foreach}
							{/if}
						</div>
						<div class="circle_state_zan clearfix">
							<!-- <p class="">{$v.addtime}</p> -->
							<div class="zan_icon" onclick="dianZan($(this))">
								<i class="like {if $v.is_praise}like-select{else}like-default{/if}" data-id='{$v.view_id}' data-praise_type='view'></i>
								<span class="zan_num" data-zan="{$v.praise_num}">{if $v.praise_num > 999}(999+){else}({$v.praise_num}){/if}</span>
							</div>
							
							<div class="comment_icon">
								<i class="img icon_pinglun3x"></i><span>评论</span>
								<input type="text" class="input_icon" data-id='{$v.view_id}'/>
							</div>
						</div>
						<!-- 评论内容 -->
						<ul class="comment_cont" data-id='{$v.view_id}'>
							{foreach from=$v.comment_list item=comment}
							<li class="com_list clearfix">
								<div class="list_title fl">
									<span class="first_word name" >{$comment.from_nickname}</span>
									{if $comment.reply_comment_id}
									<span class="hf_word">回复</span>
									<span class="last_word name">{$comment.to_nickname}</span>
									{/if}
									：<span class="info_word">{$comment.contents}</span>
								</div>
								<input type="text" class="show_keybord" data-user_id="{$comment.user_id}" data-comment_id="{$comment.comment_id}" />
							</li>
							{/foreach}
							<!-- <li class="com_list clearfix">
								<div class="list_title fl">
									<span class="first_word name" >张斌</span>
									<span class="hf_word">回复</span>
									<span class="last_word name">斌张</span>：
									<span class="info_word">张斌的评论评论内容评论内容评论内容评论内容评论内容</span>
								</div>
								<input type="text" class="show_keybord" />
							</li>  -->
						</ul>
					</div>
				</div>
				{/foreach}
			</div>
			<div id="pullUp">
				<span class="pullUpIcon"></span><span class="pullUpLabel">上拉加载...</span>
			</div>
		</div>
	</div>
</div>
<!-- 全屏图片查看器-->
<div class="swiper-container fullscreen" id="fullscreen">
	<div class="swiper-wrapper" id="swiper_wrapper">
	</div>
</div>
{include file="../footer.html"}
<div class="comment_input_wrap comment_hide">
	<input type="text" class="comment_input" placeholder="说点什么吧..." />
	<span class="comment_send no_send">发送</span>
</div>

{/block}
{block name="js"}

<script type="text/javascript" src="__PUBLIC__/Js/front/swiper.3.1.2.jquery.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/Js/front/iscroll.js"></script>
<!-- <script type="text/javascript" src="__PUBLIC__/Js/front/front_js/huati_circle_load.js"></script> -->
<script type="text/javascript" src="__PUBLIC__/Js/front/front_js/huati_circle_load_new.js"></script>
<script type="text/javascript" src="__PUBLIC__/Js/front/front_js/circle.js"></script>
<script type="text/javascript" src="__PUBLIC__/Js/front/front_js/comment_cont.js"></script>
<script type="text/javascript">
    var total = parseInt('{$total}')
    var firstRow = parseInt('{$firstRow}')
	{literal}


		var circle_banner = new Swiper('.circle_banner',{
	        pagination: '.swiper-pagination',
	        paginationClickable: true
	    })

	    var mySwiper = new Swiper('.circle_topic',{
	        loop : true,  
	        // pagination: '.swiper-pagination',  
	        effect: 'coverflow',  
	        grabCursor: true,  
	        centeredSlides: true,  
	        // nextButton: '.swiper-button-next',  
	        // prevButton: '.swiper-button-prev',  
	        slidesPerView: 'auto',  
	        coverflow: {  
	            rotate: 0,// 旋转的角度  
	            stretch: 10,// 拉伸   图片间左右的间距和密集度  
	            depth: 100,// 深度   切换图片间上下的间距和密集度  
	            modifier: 3,// 修正值 该值越大前面的效果越明显  
	            slideShadows : false// 页面阴影效果  
	        }
	    });
	   	
    	//图片查看器
    	$(function(){
    		$(document).on('click', '.dynamic_img', function(event){
    			event.preventDefault();
    			var row = $(this).data('row');
    			var img_urls = [];
    			$(this).parent().children('.dynamic_img').each(function() {
				    img_urls.push($(this).data("img"));
				});
				var html = '';
				for(i=0;i<img_urls.length;i++){
					html += '<div class="swiper-slide fullscreen_slide"><img src="'+img_urls[i]+'"/></div>';
				}
				$('#swiper_wrapper').empty().append(html);
    			console.log(img_urls);
    			$('#fullscreen').show();
    			var full_swiper = new Swiper('.fullscreen',{
    			    //pagination : '.full_pagination',
    			});
    			full_swiper.slideTo(row, 0, false);
    			
    		});
    		// 关闭查看器
    		$('#fullscreen').on('click', function(event) {
    			event.preventDefault();
    			$(this).hide();
    		});
    	})
    	$(document).scroll(function(){
	    	var scrollT = $(document).scrollTop();
	    	var headHei = $(".service_header").height();
	    	if(scrollT>=headHei){
	    		$(".service_header").css({
	    			"opacity":0.8,
	    			"transition":1000
	    		});
	    	}else{
	    		$(".service_header").css({
	    			"opacity":1,
	    			"transition":1000
	    		});
	    	}
	    });

    {/literal}
</script>

{/block}
